<template>
  <div>
    <h2>123</h2>
    <p>{{ age }}</p>
    <p>{{ r }}</p>
    <button v-on:click="age++">按一下任忆莲</button>
    <button @click="age = '小猪儿'">按一下 任忆莲变身</button>
    <button @click="chang()">按一下</button>
    <button @click="bian()">按一下</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "21",
      r: "任宝",
    };
  },
  methods: {
    //
    chang() {
      this.age--;
    },
    bian() {
      //
      if (this.r === "任宝") {
        this.r = "小猪儿";
      } else {
        if (this.r === "小猪儿") {
          this.r = "臭宝";
        } else {
          this.r = "任宝";
        }
      }
    },
  },
};
</script>

<style  >
h2 {
  color: skyblue;
}
</style>